<extend name="default/template/base_20160803" />
<block name="area_header">
	<link rel="stylesheet" href="__PUBLIC__/Webview/css/viewpage/temaizhuanchang.css?v1"/>
	<link rel="stylesheet" href="__PUBLIC__/Webview/js/dropload/0.9.0/dropload.css"/>
	<script type="text/javascript" src="__PUBLIC__/Webview/js/dropload/0.9.0/dropload.min.js"></script>
</block>
<block name="area_body">
	<div class="content-top">
		<img src="{$main_banner}">
	</div>
	<div class="countdown activity" data-starttime="{$main_time['start_time']*1000}" data-endtime="{$main_time['end_time']*1000}">
		<div class="time mid"></div>
		<span class="tip mid">距离本轮活动结束</span>
	</div>
	<div class="product-top">
		<volist name="product_info.list" id="vo" offset="0" length="3">
			<div class="pro-type-1">
				<a style="width: 100%; height: 100%; z-index: 9; position: absolute; left: 0; top: 0;"
				   href="com.moodwo.mengwu://?type=MENGWU_PRODUCT_DETAIL&pid={$vo.product_id}&groupid={$group_id}"></a>
				<div class="pro-img"><img src="{$vo.img}"></div>
				<ul>
					<li><span class="pro-msg">{$vo.name}</span></li>
					<li><span class="pro-msg-under">疯狂特卖</span></li>
				</ul>
				<span class="price">￥{$vo.group_price}</span>
				<span class="old-price"><del>￥{$vo.price}</del></span>
				<img src="__IMG__/viewpage/19.png" class="pro-badge">
			</div>
		</volist>
	</div>
	<div class="product-list">
		<div class="list-wrap">
			<volist name="product_info.list" id="vo" offset="3" length="6">
				<div class="pro-type-2">
					<a style="width: 100%; height: 100%; z-index: 9; position: absolute; left: 0; top: 0;"
					   href="com.moodwo.mengwu://?type=MENGWU_PRODUCT_DETAIL&pid={$vo.product_id}&groupid={$group_id}"></a>
					<div class="pro-img-2"><img src="{$vo.img}"></div>
					<p>{$vo.name}</p>
					<span class="price">￥{$vo.group_price}</span>
					<span class="old-price"><del>￥{$vo.price}</del></span>
					<img src="__IMG__/viewpage/20.png" class="car">
				</div>
			</volist>
		</div>
		<div style="clear: both"></div>
	</div>
</block>
<block name="area_footer">
	<script type="text/javascript">
		function ShowCountDown(starttime,endtime,ele,_t){
			var endDate = new Date(endtime);
			var now = new Date();
			var cc = $(ele).find('.time');
			var tip = $(ele).find('.tip');

			if(starttime>now){
				tip.html('距离本轮活动开始');
				endDate = new Date(starttime);
			}
			if(starttime<=now && tip.html()=='距离本轮活动开始'){
				tip.html('距离本轮活动结束');
			}

			if(endDate<=now){
				clearInterval(_t);
				if(cc.html()!="")cc.html("");
				$(ele).find('.tip').html('活动已结束！');
				$('.product-top').remove();
				$('.product-list').remove();
				return;
			}
			var leftTime=endDate.getTime()-now.getTime();
			var leftsecond = parseInt(leftTime/1000);
			var day1=Math.floor(leftsecond/(60*60*24));
			var hour=Math.floor((leftsecond-day1*24*60*60)/3600);
			var minute=Math.floor((leftsecond-day1*24*60*60-hour*3600)/60);
			var second=Math.floor(leftsecond-day1*24*60*60-hour*3600-minute*60);
			cc.html("<span class='count-t'>"+day1+"</span><span>天</span><span class='count-t'>"+hour+"</span><span>时</span><span class='count-t'>"+minute+"</span><span>分</span><span class='count-t'>"+second+"</span><span>秒</span>");
		}

		$('.activity').each(function(index,ele) {
			var starttime = parseInt($(this).attr('data-starttime'));
			var endtime = parseInt($(this).attr('data-endtime'));
			ShowCountDown(starttime,endtime,ele);
			var t = setInterval(function(){ShowCountDown(starttime,endtime,ele,t)},1000);
		});
	</script>
	<script type="text/javascript">
		var p_ids = {$p_ids};
		$(function(){
			var counter = 1;
			// 每页展示6个
			var num = 6;
			var group_id = {$group_id};

			// dropload
			$('.product-list').dropload({
				scrollArea : window,
				loadDownFn : function(me){
					$.ajax({
						type: 'POST',
						url: "{:U('webview/viewPage/queryProduct')}",
						data:{ids:p_ids,curpage:counter,size:num,group_id:group_id},
						dataType: 'json',
						success: function(data){

							if(data.status){
								var result = '';
								counter++;
								var list = data.info.list;

								for(var i = 0; i < list.length; i++){
									result += '<div class="pro-type-2"> ' +
											'<a style="width: 100%; height: 100%; z-index: 9; position: absolute; left: 0; top: 0;"' +
											'href="com.moodwo.mengwu://?type=MENGWU_PRODUCT_DETAIL&pid='+list[i].product_id+'&groupid={$group_id}"></a> ' +
											'<div class="pro-img-2"><img src="'+list[i].img+'"></div> ' +
											'<p>'+list[i].name+'</p> ' +
											'<span class="price">￥'+list[i].group_price+'</span> ' +
											'<span class="old-price"><del>￥'+list[i].price+'</del></span> ' +
											'<img src="__IMG__/viewpage/20.png" class="car"> </div>'

								}

								if(counter*num+3 >= data.info.count){
									// 锁定
									me.lock();
									// 无数据
									me.noData();
								}

								$('.list-wrap').append(result);
								// 每次数据加载完，必须重置
								me.resetload();

							}

						},
						error: function(xhr, type){
							alert('Ajax error!');
							// 即使加载出错，也得重置
							me.resetload();
						}
					});
				}
			});
		});
	</script>
</block>